<template>
    <view>
        <!-- 红包弹窗 -->
        <view class="windows" :class="windowsState">
            <!-- 遮罩层 -->
            <view class="mask" @touchmove.stop.prevent="discard" @tap="closeRedEnvelope"></view>
            <view class="layer" @touchmove.stop.prevent="discard">
                <view class="open-redenvelope">
                    <view class="close-btn">
                        <view class="icon close" @tap="closeRedEnvelope"></view>
                    </view>
                    <view class="from">
                        <image :src="redenvelopeData.face" :lazy-load="true"></image>
                        <text>{{ redenvelopeData.from }}发出的红包</text>
                    </view>
                    <view class="blessing">{{ redenvelopeData.blessing }}</view>
                    <view class="msg" v-if="redenvelopeData.msg">
                        {{redenvelopeData.msg}}
                    </view>
                    <view class="top">
                        <view class="img" v-if="redenvelopeData.grab_money==0 && redenvelopeData.surplus_money>0"
                              @tap="robRed">开
                        </view>
                        <view class="money" v-if="redenvelopeData.grab_money>0">{{ redenvelopeData.money }}</view>
                    </view>
                    <view class="showDetails" @tap="toDetails(redenvelopeData.id)">
                        查看领取详情
                        <view class="icon to"></view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'red-card',
        data() {
            return {};
        },
        props: {
            windowsState: {
                type: String,
                default: ''
            },
            redenvelopeData: {
                type: Object,
                default() {
                    return {
                        rid: 0, //红包ID
                        from: '',
                        face: '',
                        blessing: '恭喜发财',
                        money: 0,
                        surplus_money: '',
                        grab_money: 0,
                        msg: 0
                    };
                }
            },
        },
        methods: {
            discard() {
                return false;
            },
            //领取详情
            toDetails() {
                this.$emit("toDetails", this.redenvelopeData)
            },
            robRed() {
                this.$emit('robRed', this.redenvelopeData);
            },
            // 关闭红包弹窗
            closeRedEnvelope() {
                this.$emit("closeRedEnvelope", true)
            },
        }
    }
</script>

<style lang="scss">
    @import "@/static/css/chat/style.scss";
</style>
